<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div
        class="box"
        id="myid"
        myattr="myval"
      >
        我是div
    </div>

    <!-- <img src="" datasrc="./1.jpg" /> -->

    <div mycolor="red">11</div>
    <div mycolor="blue">22</div>
    <div mycolor="yellow">33</div>

    <script>
        // 元素的属性操作 attribute
        // 1. 通过属性名 获取属性值； getAttribute
        // var box = document.querySelector(".box");
        // box.onclick = function(){
        //     //   var res =   box.getAttribute("class");
        //     //   console.log(res);
        //     // 获取自定义属性
        //     var res = this.getAttribute("myattr");
        //     console.log(res);
        // }

        // 2.设置元素的属性  元素.setAttribute("属性名","属性值");

        // var box = document.querySelector(".box");
        // box.onclick = function(){
        //     this.setAttribute("myattr2","myval2");
        //     // this.setAttribute("class","active");
        // }


        // 3.移除元素的属性 ： 元素.removeAttribute("属性名");
        // var box = document.querySelector(".box");
        // box.onclick = function(){
        //     this.removeAttribute("myattr");
        // }


        // 练习：
        // var arr = ["blue","yellow","green"];
        // 三个div 先需要把arr 里的颜色 设置成 div 的自定义属性保存起来
        // 当点击每个div的时候 设置对应属性的颜色
    </script>
</body>
</html>